function addWaterMark(el: HTMLElement, text) {
  if (!text) return;
  const canvas = document.createElement("canvas");
  const w = el.clientWidth,
    h = el.clientHeight;
  (canvas.width = w), (canvas.height = h);
  const context = canvas.getContext("2d");
  function drawText() {
    context.font = `${el.dataset.font_size ?? 10} sans-serif`;
    context.textAlign = "center";
    context.textBaseline = "middle";
    context.fillStyle = el.dataset.color ?? "black";
    context.translate(w / 2, h / 2);
    context.rotate((-45 * Math.PI) / 180);
    context.fillText(text, 0, 0);
  }
  if (el instanceof HTMLImageElement) {
    el.crossOrigin = "Anonymous";
    el.onload = () => {
      context.drawImage(el, 0, 0, w, h);
      drawText();
      const href = canvas.toDataURL("image/png");
      el.src = href;
      el.onload = null;
    };
  }
  if (!(el instanceof HTMLImageElement)) {
    drawText();
    const href = canvas.toDataURL("image/png");
    el.style.backgroundImage = `url('${href}')`;
  }
}
export default {
  mounted(el: HTMLElement, binding) {
    addWaterMark(el, binding.value);
  },
  updated(el: HTMLElement, binding) {
    addWaterMark(el, binding.value);
  }
};
